// 设置跳转到购物车页面
$('#toshopListPage').on('click', function () {
    location.href = './index.html'
})
// 全选按钮设置未未选择
let stateAll = false
// 总价默认为0
let allSinglePrice = 0

// 获取JSON字符串内容
let carsStr = localStorage.getItem("CARSSHOPLIST")
let cars = JSON.parse(carsStr) || []

// 显示所有商品
function showProduct() {
    // 循环列表计算小计价格
    cars.forEach(function (item) {
        item.singlePrice = (item.unitPrice * item.shop).toFixed(2)
    })
    let carList = {
        stateAll,
        cars
    }
    let htmlTxt = template('showcarsList', carList)
    $('table').html(htmlTxt)
    // 计算总价
    totalPrice()
}

// 委托处理
function entrustProcessing() {
    // 删除功能
    $('table').on('click', '.delete', function () {
        // 找删除商品的id
        let id = $(this).parent().parent().children().eq(1).html()
        // findIndex会返回满足条件的索引号
        let index = cars.findIndex(item => item.id == id)
        // 删除对应索引号的数组
        cars.splice(index, 1)
        // 改变之后，数字转为JSON字符串然后存储
        localStorage.setItem("CARSSHOPLIST", JSON.stringify(cars))
        // 如果所有复选框都为true状态，则设置全选框为true
        stateAll = cars.every(item => item.state == true)
        // 重新刷新商品显示
        showProduct()
    })
    // 购买数量加一
    $('table').on('click', 'input[name="plus"]', function () {
        // 找要数量加加的商品的id
        let id = $(this).parent().parent().children().eq(1).html()
        // find返回满足条件的元素
        let product = cars.find(item => item.id == id)
        product.shop++
        // 改变之后，数字转为JSON字符串然后存储
        localStorage.setItem("CARSSHOPLIST", JSON.stringify(cars))
        // 重新刷新商品显示
        showProduct()
    })
    // 购买数量减一
    $('table').on('click', 'input[name="minus"]', function () {
        // 找要数量减减的商品的id
        let id = $(this).parent().parent().children().eq(1).html()
        // find返回满足条件的元素
        let product = cars.find(item => item.id == id)
        product.shop--
        // 改变之后，数字转为JSON字符串然后存储
        localStorage.setItem("CARSSHOPLIST", JSON.stringify(cars))
        // 重新刷新商品显示
        showProduct()
    })
    // 全选
    $('table').on('click', 'input[name="checkAll"]', function () {
        // 状态反转
        stateAll = !stateAll
        // 如果全选为true，则遍历所以复选并选中
        if (stateAll) {
            cars.forEach(item => item.state = true)
        } else {
            cars.forEach(item => item.state = false)
        }
        // 改变之后，数字转为JSON字符串然后存储
        localStorage.setItem("CARSSHOPLIST", JSON.stringify(cars))
        // 重新刷新商品显示
        showProduct()
    })
    // 复选
    $('table').on('click', 'input[name="checkItem"]', function () {
        // 寻找点击对象所在的商品id号
        let id = $(this).parent().next().html()
        // 遍历数组寻找一样id的元素
        let product = cars.find(item => item.id == id)
        // 将复选的id的状态反转
        product.state = !product.state
        // 如果所有复选框都为true状态，则设置全选框为true
        stateAll = cars.every(item => item.state == true)
        // 改变之后，数字转为JSON字符串然后存储
        localStorage.setItem("CARSSHOPLIST", JSON.stringify(cars))
        // 重新刷新商品显示
        showProduct()
    })
    // 改变输入框的购买数量
    $('table').on('change', 'input[name="amount"]', function () {
        // 寻找点击对象所在的商品id号
        let id = $(this).parent().parent().children().eq(1).html()
        // 遍历数组寻找一样id的元素
        let newCars = cars.find(item => item.id == id)
        // 将输入的数量赋值给相对应的的数组中的值
        newCars.shop = $(this).val()
        // 改变之后，数字转为JSON字符串然后存储
        localStorage.setItem("CARSSHOPLIST", JSON.stringify(cars))
        // 重新刷新商品显示
        showProduct()
    })
}
// 计算总价
function totalPrice() {
    let totalPrice = cars.reduce(function (s, item) {
        return s += Number(item.singlePrice)
    }, 0)
    $('#totalPrice').html(`￥${totalPrice.toFixed(2)}`)
}

// 删除选中状态的商品
function delProduct() {
    // 创建点击事件
    $('#delChecked').on('click', function () {
        // 把复选按钮为选中状态的的商品筛选出来到一个新数组
        let newArr = cars.filter(function (item) {
            return item.state == true
        })
        // 将原数组遍历与新数组匹配
        for (i = 0; i < cars.length; i++) {
            newArr.forEach(function (item) {
                // 如果匹配到了相同的id，原数组就执行删除操作
                if (cars[i].id == item.id) {
                    cars.splice(i, 1)
                }
            })
        }
        // 将全选按钮重置为false
        stateAll = false
        // 改变之后，数字转为JSON字符串然后存储
        localStorage.setItem("CARSSHOPLIST", JSON.stringify(cars))
        // 重新刷新页面
        showProduct()
    })
}
// 显示所有商品
showProduct()
// 委托处理事件
entrustProcessing()
// 删除选中状态的商品
delProduct()